<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>乘客监听页面</title>
</head>
<body>
    <h1>乘客监听页面，模拟监听乘客客户端</h1>
    <button onclick="setMessageContent('鼠标点我了')">测试message显示</button>
    <div id="message">
        展示服务推送过来的消息<br/>
    </div>

    <button onclick="sourceClose()">
        关闭连接
    </button>
</body>

<script>
    userId = "123456789";
    identity = 1;
    source = null;
    if (window.EventSource){
        console.info("此浏览器支持sse");
        source = new EventSource("http://localhost:9090/concent?userId="+userId+"&identity="+identity);
        // 添加监听时间
        source.addEventListener("message",function (e){
            var concent = e.data
            console.info("消息内容"+concent);
            setMessageContent(concent);
        })
    }else {
        console.info("此浏览器不支持");
    }

    function setMessageContent(content){
        document.getElementById("message").innerHTML+=(content+'<br/>');
    }

    function sourceClose(){
        // 客户端source关闭
        source.close();
        // 服务端SseMap的移除
        const httpRequest = new XMLHttpRequest();
        httpRequest.open("get","http://localhost:9090/sourceClose?userId="+userId+"&identity="+identity);
        httpRequest.send();

    }
</script>

</html>